<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/bootstrapValidator.min.css">
	<script type="text/javascript" src="../js/jquery-3.0.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
	<script src="../js/highcharts.js"></script>
	<!--<script type="text/javascript" src="../js/TestOne.js"></script>-->
	<script type="text/javascript" src="../js/curve.js"></script>
	<script type="text/javascript" src="../js/histogram.js"></script>
	<script type="text/javascript" src="../js/connectedRate.js"></script>
	<script type="text/javascript" src="../js/packetLoss.js"></script>
	<!--<script type="text/javascript" src="../js/histogram.js"></script>-->
	<script  language="javascript">
		function dosubmit() {
			LocalText = document.getElementById("Local").value;
			//alert(LocalText);
			var params = {};
			params.ipAddress = LocalText;
			$.ajax({
				type: "post",
				url: "http://localhost:8080/startPing.action",
				data:params,
				dataType: "json",

				success: function (res,status) {
					// console.log(data.data);
				},
				error: function(res,status,xhr){
					alert(xhr);
					alert(status);
					alert(res);
				}
			});
		}
		function blank () {
		}
	</script>

</head>
<body>
<div class="container">
	<div class="row">
		<div class="container">
			<div class="jumbotron info">
				<h1>网络传输质量动态监测</h1>
				<p>欢迎来到0402特别制作页面！</p>
				<p><a class="btn btn-primary btn-lg" role="button">
					了解更多</a>
				</p>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<ul id="myPage" class="nav nav-pills nav-justified" style="font-size:13px"> <!胶囊式导航栏>
				<li class="active"><a href="#time" data-toggle="tab">数据包传输时间</a></li>
				<li><a href="#chixu" data-toggle="tab">持续可连通率</a></li>
				<li><a href="#chuanshu" data-toggle="tab">丢包率</a></li>
			</ul>
			<div id="myPageContent" class="tab-content">
				<div class="tab-pane fade in active" id="time">
					<div class="row">&nbsp</div>
					<div class="row">
						<div class="col-md-2">
							<ul id="myTab" class="nav nav-pills nav-stacked" style="font-size:13px"><!垂直胶囊式导航栏>
								<li class="active"><a href="#spline" data-toggle="tab">动态实时曲线图</a></li>
								<li><a href="#histog" data-toggle="tab">总结柱状图</a></li>
							</ul>
						</div>
						<div class="col-md-10">
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade in active" id="spline">
									<div class="row">
										<div class="col-lg-3"></div>
										<div class="col-lg-5"	>
											<input type="text" class="form-control" placeholder="请输入目的机的IP" id="Local" name="Local" size="8" data-provide="typeahead"/>
										</div>
										<div class="col-lg-4">
											<!--<button id="ping" name="ping" class="btn btn-warning form-control" onclick="dosubmit()">Ping</button>-->
											<button id="ping" name="ping" class="btn btn-warning form-control" onclick="dosubmit()">Ping</button>
										</div>
									</div>
									<div class="row">&nbsp</div>
									<div class="row">
										<div class="col-md-12">
											<div id="line" style="width: 950px;height: 400px"></div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="histog">
									<div class="row">
										<div class="col-lg-3"></div>
										<div class="col-lg-5"	>
											<input type="text" class="form-control" placeholder="请输入目的机的IP" id="CheckText" name="CheckText" size="8" data-provide="typeahead"/>
										</div>
										<div class="col-lg-4">
											<!--<button id="ping" name="ping" class="btn btn-warning form-control" onclick="dosubmit()">Ping</button>-->
											<button id="check" name="check" class="btn btn-warning form-control" onclick="blank()">check</button>
										</div>
									</div>
									<div class="row">&nbsp</div>
									<!--<div id="histogram" style="width: 950px;height: 400px"></div>-->
									<div id="histogram" style="width: 950px;height: 400px"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="chixu">
					<div class="row">&nbsp</div>
					<div class="row">
						<div class="col-lg-3"></div>
						<div class="col-lg-5"	>
							<input type="text" class="form-control" placeholder="请输入目的机的IP" id="ConnectText" name="ConnectText" size="8" data-provide="typeahead"/>
						</div>
						<div class="col-lg-4">
							<!--<button id="ping" name="ping" class="btn btn-warning form-control" onclick="dosubmit()">Ping</button>-->
							<button id="connect" name="connect" class="btn btn-warning form-control" onclick="blank()">Connect_rate</button>
						</div>
					</div>
					<div class="row">&nbsp</div>
					<!--<div id="histogram" style="width: 950px;height: 400px"></div>-->
					<div id="connectrate" style="width: 950px;height: 400px"></div>
				</div>
				<div class="tab-pane fade" id="chuanshu">
					<div class="row">&nbsp</div>
					<div class="row">
						<div class="col-lg-3"></div>
						<div class="col-lg-5"	>
							<input type="text" class="form-control" placeholder="请输入目的机的IP" id="PacketText" name="PacketText" size="8" data-provide="typeahead"/>
						</div>
						<div class="col-lg-4">
							<!--<button id="ping" name="ping" class="btn btn-warning form-control" onclick="dosubmit()">Ping</button>-->
							<button id="packetLoss" name="packetLoss" class="btn btn-warning form-control" onclick="blank()">packetLoss</button>
						</div>
					</div>
					<div class="row">&nbsp</div>
					<!--<div id="histogram" style="width: 950px;height: 400px"></div>-->
					<div id="packet" style="width: 950px;height: 400px"></div>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>